﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register TagPrefix="dx" Namespace="DevExpress.Web.ASPxSplitter" Assembly="DevExpress.Web.v14.1, Version=14.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript">
        function OnPaneResized (s, e) {
            var width = e.pane.GetClientWidth();
            var height = e.pane.GetClientHeight();
            var name = e.pane.name;
            
            alert (name + ": " + width + "x" + height);
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <dx:ASPxSplitter ID="splitter" ClientInstanceName="splitter" runat="server" Height="500px"
                Width="500px">
                <Panes>
                    <dx:SplitterPane  Name="rootpane1">
                        <Panes>
                            <dx:SplitterPane Name="pane1">
                                <PaneStyle BackColor="#FFC0C0">
                                </PaneStyle>
                                <ContentCollection>
                                    <dx:SplitterContentControl runat="server">
                                    </dx:SplitterContentControl>
                                </ContentCollection>
                            </dx:SplitterPane>
                            <dx:SplitterPane Name="pane2">
                                <PaneStyle BackColor="#FFC0FF">
                                </PaneStyle>
                                <ContentCollection>
                                    <dx:SplitterContentControl runat="server">
                                    </dx:SplitterContentControl>
                                </ContentCollection>
                            </dx:SplitterPane>
                        </Panes>
                        <PaneStyle BackColor="#FFFFC0">
                        </PaneStyle>
                        <ContentCollection>
                            <dx:SplitterContentControl runat="server">
                            </dx:SplitterContentControl>
                        </ContentCollection>
                    </dx:SplitterPane>
                    <dx:SplitterPane  Name="rootpane2">
                        <Panes>
                            <dx:SplitterPane Name="pane3">
                                <PaneStyle BackColor="#C0FFFF">
                                </PaneStyle>
                                <ContentCollection>
                                    <dx:SplitterContentControl runat="server">
                                    </dx:SplitterContentControl>
                                </ContentCollection>
                            </dx:SplitterPane>
                            <dx:SplitterPane Name="pane4">
                                <PaneStyle BackColor="#C0C0FF">
                                </PaneStyle>
                                <ContentCollection>
                                    <dx:SplitterContentControl runat="server">
                                    </dx:SplitterContentControl>
                                </ContentCollection>
                            </dx:SplitterPane>
                        </Panes>
                        <PaneStyle BackColor="#C0FFC0">
                        </PaneStyle>
                        <ContentCollection>
                            <dx:SplitterContentControl runat="server">
                            </dx:SplitterContentControl>
                        </ContentCollection>
                    </dx:SplitterPane>
                </Panes>
                <ClientSideEvents PaneResized="OnPaneResized" />
            </dx:ASPxSplitter>
        </div>
    </form>
</body>
</html>
